<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in billList" :key="item.id" >
        <a href="javascript:;" >
          <img class="mui-media-object mui-pull-left" :src="item.pic_small" />
          <div class="mui-media-body">
            <router-link :to="'/playsongs/' + item.song_id" class="myTitle">
              {{item.album_title}}
              <p class="mui-ellipsis">{{item.artist_name}}</p>
            </router-link>
          </div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
          <div class="mui-media-body">
            <p class="mui-ellipsis ckeckForm">
              <router-link :to="{name:'toDisplayMore',params:{type:this.type,title:this.title}}">查看该榜单></router-link>
            </p>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
        billList:[],
    };
  },
   props:{
    title:String,
    type:String,
    size:String
  },
  created(){
      this.getBillList()
  },
  methods: {
       getBillList(){
        const billURL = 
        this.HOST + 
        `/v1/restserver/ting?method=baidu.ting.billboard.billList&size=5&type=${this.type}`
          this.$axios
          .get(billURL)
          .then(res => {
              //console.log(res.data)
              this.billList = res.data.song_list
          })
          .catch()
        },
  }
};
</script>
<style lang="" scoped>

</style>
